<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.contextPath }/">
<meta charset="UTF-8">
<title> xiaoge Login Page</title>
<link rel="stylesheet" href="ht/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="ht/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="ht/js/xiaogemsg.js"></script>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
	background-image: url(img/loginbg_01.jpg);
	background-size: 100%, 100%;
}

.main {
	margin: 100px auto;
	border: 1px solid gainsboro;
	width: 500px;
	height: 400px;
	border-radius: 5px;
	background-color: ghostwhite;
	color:blue;
	opacity: 0.5;
	padding-top: 20px;
}
</style>
<script>
	$(document).ready(function() {
		/*获取验证码*/
		$("#getmangerPwd").bind("click", function() {
			/* 用户名验证 */
			if ($("#managerName").val()==""||$("#managerName").val()==null) {
				xiaogemsg(220, "用户名不能为空", 2000);
				return false;
			} 
			/* 密码验证 */
			if ($("#managerPassword").val()==""||$("#managerPassword").val()==null) {
				xiaogemsg(220, "密码不能为空", 2000);
				return false;
			} else{
				if ($("#managerPassword").val().length<6) {
					xiaogemsg(220, "你输入的密码不正确！", 2000);
					return false;
				}
			}
			/*邮箱验证*/
			var phone = $("#qqEmail").val();
			var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
			
			if (!reg.test(phone)) {
				xiaogemsg(220, "你输入的邮箱有误！", 2000);
				return false;
			} else {
				$("#login").attr("disabled", false);
			} 
			var phone = $("#qqEmail").val();
			/*生成验证码*/
			var getPCPwd = "";
			for (var i = 1; i < 6; i++) {
				getPCPwd += Math.floor(Math.random() * 10 + 1) + "";
			}
			$("#mangerPwd").val(getPCPwd);

			var time = 60;
			var Mytimer = setInterval(function() {  
				$("#getmangerPwd").attr("disabled", "disabled")
				$("#getmangerPwd").text("重发(" + time + "s)");
				if (time == 0) {
					$("#getmangerPwd").attr("disabled", false);
					clearInterval(Mytimer)
					$("#getmangerPwd").text("重发发送");
				}
				time--;
			}, 1000);
			
			 //发送验证码
			$.post("managerInfoAction!sendPwd.action",{"mangerPwd":getPCPwd,"qqEmail":phone},function(data){
				
				if(data == 1){
					xiaogemsg(99,"验证码已发送",1000);
				}else{
					xiaogemsg(99,"sorry,网咯异常。。。",1000);
				}
			}) ;
		});

		/*登录*/
		$("#login").bind("click", function() {
			pcPwd = $("#mangerPwd").val();
			userPwd = $("#userPwd").val();
			if (pcPwd == userPwd) {
				var userName = $("#userName").val();
				var qqEmail = $("#qqEmail").val();
				$("#frm").attr("action","managerInfoAction!login.action");
				$("#frm").submit();
			} else {
				xiaogemsg(200, "你输入的验证码无效", 2000)
			}
		});
		/*查看头像*/
		$("#titleImg").click(function() {
			xiaogeImg(500, 500, $(this).attr("src"));
		})
	});
</script>
</head>
<body>
	<div class="main">
		<form id="frm" action="" class="form-horizontal" role="form" method="post">
			<input type="hidden" id="mangerPwd" name="mangerPwd" />
			<div class="form-group">
				<div class="col-sm-12" style="text-align: center;">
					<img id="titleImg" src="ht/img/avatar-3.jpg" class="img-circle" width="100px" height="100px" />
				</div>
			</div>
			<div class="form-group">
				<label for="phone" class="col-sm-2 control-label">账号：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="managerName" name="manager.managerName" placeholder="请输入用户名">
				</div>
			</div>
			<div class="form-group">
				<label for="phone" class="col-sm-2 control-label">密码：</label>
				<div class="col-sm-9">
					<input type="password" class="form-control" id="managerPassword" name="manager.managerPassword" placeholder="请输入登录密码">
				</div>
			</div>
			<div class="form-group">
				<label for="qqEmail" class="col-sm-2 control-label">E-mail</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" id="qqEmail" name="qqEmail" placeholder="请输入你的qq邮箱">
				</div>
				<div class="col-sm-4">
					<button type="button" id="getmangerPwd" class="btn btn-primary btn-lg btn-block">获取验证码</button>
				</div>
			</div>
			<div class="form-group">
				<label for="phone" class="col-sm-2 control-label">验证码</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="userPwd" placeholder="请输入验证码">
				</div>
			</div>
			<div class="form-group">
			<div class="col-sm-1">
			</div>
				<div class="col-sm-10">
					<button type="button" id="login" disabled="disabled" class="btn btn-primary btn-lg btn-block">登录</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>
